<template>
    <div class="property">
        <LabelInputSliderResetProp v-model="numberRef" :label="property.name" :max="minMax[1] <= 1 ? minMax[1] * 100 : minMax[1]" :min="minMax[0]" :defaultValue="defaultValue" :step="step"></LabelInputSliderResetProp>
        <!-- <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
        <SliderTime :width="144" v-model:value="realNumberRef" @change="changenumber"
            :step="step < 1 ? step * 100 : step" :max="minMax[1] <= 1 ? minMax[1] * 100 : minMax[1]" :min="minMax[0]"
            :realVal="realVal" :ket="numberRef" />
        <span>{{ numberRef }}</span> -->
    </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, computed, ref, onMounted } from "vue";
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { PropertyCompCallbackFuncParamsType } from "./base";
import SliderTime from "../../../../components/SliderTime.vue";
import LabelInputSliderResetProp from "../../../LabelInputSliderResetProp.vue"
const props = withDefaults(defineProps<{
    property: any
}>(), {
});
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();

const { property } = props
const { minMax, readonly, step } = property

const disposer = createVueDisposer(onBeforeUnmount)
const numberRef = readonly ? toReadonlyVueRef<number | undefined>(disposer, property.reactVar, s => s) : toVR<number | undefined>(disposer, property.reactVar, s => s) 
const realNumberRef = ref()
const defaultValue = property.defaultValue
const mouseFlag = ref(false)
const changenumber = (val: number) => {
    if (step < 1) {
        numberRef.value = val / 100
    } else {
        numberRef.value = val
    }
}
const realVal = computed(() => {
    return JSON.stringify(numberRef.value)
})
onMounted(() => {
    if (step < 1) {
        realNumberRef.value = numberRef.value ? (numberRef.value * 100) : property.defaultValue * 100
    } else {
        realNumberRef.value = numberRef.value
    }
})
const resetDefult = () => {
    numberRef.value = defaultValue
    if (step < 1) {
        realNumberRef.value = defaultValue * 100
    } else {
        realNumberRef.value = defaultValue
    }
}
</script>
<style scoped>
.property {
    width: 250px;
    height: 26px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 26px;
    color: rgba(230, 230, 230, 1);
}

.property>label {
    display: inline-block;
    width: 70px;
    height: 26px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.property>span {
    display: inline-block;
    width: 26px;
    height: 26px;
    cursor: pointer;
    background: rgba(88, 88, 93, 1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 10px;
}


.item_name {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
}

.readonly_flag {
    flex: 1;
}

.readonly_true {
    cursor: not-allowed;
    cursor: no-drop;
}

.checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(230, 230, 230, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 10px;
}
</style>
